import React, { PureComponent } from 'react';
import {
  Input,
  Select,
  Button,
  Icon,
  Upload,
  Divider,
  Row,
  Col,
  Checkbox,
  message,
} from 'antd';
import styles from './style.less';
import Uploder from './Uploader';
const { Option } = Select;

export default class Spec extends PureComponent{
  state = {
    specData: [], //商品规格
    showSpecPic: false, //是否显示规格图片
    clearImgs : false  //是否清空图片
  };
  componentWillReceiveProps  = (props)=>{
    console.log(props.defaultValue);
    if(props.defaultValue.length > 0){
      let tempState = {
        specData : props.defaultValue,
      };
      //是否显示图片
      if(props.defaultValue[0].specvs.img){
        tempState.showSpecPic = true;
      }
      this.setState(tempState);
    }
  };
  bindSpecPic = ()=>{
    const { showSpecPic, specData } = this.state;
    let temp = [...specData];
    let clearImgs = false;
    //清空上传的图片值
    if(showSpecPic && temp.length > 0){
      temp[0].specvs.forEach(v=>{
        v.url = '';
      });
      clearImgs = true;
    }
    this.setState({
      showSpecPic : !showSpecPic,
      specData: temp,
      clearImgs : clearImgs
    });
  };
  bindAddSpec = ()=> {
    const specData = [...this.state.specData];
    if(specData.length === 3){
      message.warning(`最多只能添加三级规格`);
      return;
    }
    specData.push({
        "name": "",
        "specvs": [
          {
            "name": "",
            "img": ""
          }
        ]
      }
    );
    this.setState({
      specData,
    });
  };
  bindDelSpec = (index)=>{
    const specData = [...this.state.specData];
    specData.splice(index,1);
    this.setState({
      specData,
    });
    this.props.onChange(specData);
  };
  bindSpecNameChange = (value,index)=>{
    const specData = [...this.state.specData];
    specData[index].name = value;
    this.setState({
      specData,
    });
    this.props.onChange(specData);
  };
  bindSpecValueChange = (e, i ,j)=>{
    const specData = [...this.state.specData];
    let value = e.target.value;
    specData[i].specvs[j].name = value;
    this.setState({
      specData,
    });
  };
  bindCheckSpecValue = (e, i ,j)=>{
    //检查输入规格值是否重复
    const specData = [...this.state.specData];
    let value = e.target.value;
    if(value == ''){return false}
    let equalNumber = 0;
    for(let k = 0; k < specData[i].specvs.length; k++){
      if(specData[i].specvs[k].name == value){
        equalNumber++;
      }
    }
    if(equalNumber <= 1){
      this.props.onChange(specData);
    }else{
      message.error(`规格值不能相同`);
    }
  };
  bindAddSpecValue = (index)=>{
    const specData = [...this.state.specData];
    specData[index].specvs.push({
      name : '',
      img : ''
    });
    this.setState({
      specData,
    });
  };
  bindDelSpecValue = (i,j)=>{
    const specData = [...this.state.specData];
    if(specData[i].specvs.length == 1){
      return false;
    }else{
      specData[i].specvs.splice(j,1);
      this.setState({
        specData,
      });
    }
    this.props.onChange(specData);
  };
  bindImgsChange = (file, i ,j)=>{
    let specData = [...this.state.specData];
    let url = file.length > 0 ? file[0].url : '';
    specData[i].specvs[j].img = url;
    this.setState({
      specData
    });
    this.props.onChange(specData);
  };
  render(){
    const { specData, showSpecPic, clearImgs } = this.state;
    //const { uptoken } = this.props;
    return <div>
      {
        specData.map((v,i)=>{
        return (
          <div key={`spec_${i}`}>
            <Row gutter={8}>
              <Col span={3}>规格名：</Col>
              <Col span={5}>

                <Select
                  value={v.name}
                  mode="combobox"
                  onChange={(value)=>{this.bindSpecNameChange(value,i)}}
                >
                  <Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>
                </Select>
                <Icon type="close-circle-o" className={styles.delIcon} onClick={()=>{this.bindDelSpec(i)}}  />
              </Col>
              {
                i == 0 ? <Col span={6}><Checkbox onChange={this.bindSpecPic} checked={showSpecPic}>显示规格图片</Checkbox></Col> : null
              }
            </Row>
            <Row gutter={8}>
              <Col span={3}>规格值：</Col>
              {
                v.specvs.map((val,j)=>{
                  return <Col span={5} key={`specvs_${j}`}>
                    <Input value={val.name} onChange={(e)=>{this.bindSpecValueChange(e,i,j)}} onBlur={(e)=>{this.bindCheckSpecValue(e,i,j)}} /><Icon type="close-circle-o" className={styles.delIcon} onClick={()=>{this.bindDelSpecValue(i,j)}} />
                    {
                      i == 0 ? <span style={{'justifyContent':'center',display:showSpecPic ? 'flex' : 'none'}}>
                                          <Uploder
                                            clear = { clearImgs }
                                            onChange = {(file)=>{this.bindImgsChange(file,i,j)}}
                                          />
                                          {/*<Upload
                                            name="rule"
                                            listType="picture-card"
                                            className="avatar-uploader"
                                            showUploadList={false}
                                            action="//jsonplaceholder.typicode.com/posts/"
                                          >
                                          <div>
                                            <Icon type="plus" />
                                            <div className="ant-upload-text">Upload</div>
                                          </div>
                                          </Upload>*/}
                                        </span> : null
                    }
                  </Col>
                })
              }

              <Col span={6}><a onClick={()=>{this.bindAddSpecValue(i)}}><Icon type="plus-circle-o" /> 添加规格值</a></Col>
            </Row>
            <Divider></Divider>
          </div>
        )
      })
    }
    <Button onClick={this.bindAddSpec}>添加</Button>
  </div>
  }
}
